import AbstractPlugin from '../abstract-plugin'
import {CN,EN,Icon,Action} from '../../config'
import Utils from '../../utils'
import cssText	from './index.jcss'
import ColorPicker from '../color-picker'
import LineStyle from '../line-style'

const Csts = {
	pathLabel:"path-label",
	pathText:"path-text",
	requestText:"requestText",
	onStateAction:"onStateAction",
	onStepAction:"onStepAction"
}

const ActionList=[
{
	title:"填充",
	icon:Icon.filling,
	action:"requestFill"
},
{
	title:"线条样式",
	icon:Icon.solid,
	action:"requestLineStyle"
},
{
	title:"标签",
	icon:Icon.Text,
	action:"requestText"
},
{
	title:"删除",
	icon:Icon.garbage,
	action:"requestGarbage"
}
]
const tpl = `
<button class="${CN.iconfont} #{data.cla}" title="#{data.title}" data-action="#{data.action}">
`

export default class EditMng extends AbstractPlugin{
	constructor(...a){
		super(...a)
		this.createClassName({
			panel:"panel",
			btn:"action-btn"
		})
		this.__init({
			cssText,
			layer:true,
			layerClass:CN.layer
		})
		this.cp = new ColorPicker(this.$event)
		this.ls = new LineStyle(this.$event,null,this.cn)
		// this.render()
		this.bind()
	}
	render(path,idx){
		let cn = this.cn
		let actionList = this.getActionList(path,idx)
		let html = actionList.map(item=>{
			return Utils.parseText(tpl,{
				cla:[cn.btn,CN.abtn,item.icon].join(" "),
				...item
			})
		}).join("")
		this.panel.innerHTML = `
		<div><span class="${CN.iconfont} ${Icon[path.action]}"> <label id="${Csts.pathLabel}">${path.step[0].text}</label></div>
		<div>${html}</div>
		<div><input id="${Csts.pathText}" data-action="${Csts.onStepAction}" data-k="text" class="${CN.input+' '+CN.hide}" value="${path.step[0].text}"></div>
		`
	}
	getActionList(path,idx){
		if(path.action===Action.Point)
			return ActionList
		else if(path.action===Action.Image)
			return [ActionList[2]]
		else if(idx===-1)
			return [ActionList[0],ActionList[1],ActionList[3]]
		else
			return [ActionList[2]]
	}
	bind(){
		this.cp.on(EN.action,this.onColorPick.bind(this))
		this.ls.on(EN.action,(d)=>{
			let k = d.action=="onLineWidth"?"lineWidth":"lineDash"
			this.emit(EN.action,{
				action:Csts.onStateAction,
				k,
				v:d.arg,
				idx:this.idx
			})
		})
		this.panel.addEventListener("change",(e)=>{
			let target = e.target
			let {action,k} = target.dataset
			let v = target.nvalue
			this.panel.query("#"+Csts.pathLabel).innerText=v
			this.emit(EN.action,{
				action,
				k,
				v,
				idx:this.idx
			})
		})
	}
	toggleLabelInput(show){
		let method = show?"remove":"add"
		this.panel.query("#"+Csts.pathText).classList[method](CN.hide)
	}
	onClick(e){
		let target = e.target
		let action = target.dataset.action
		if(!action)return
		let cond = ActionList.map(a=>a.action).includes(action)
		cond&&this.toggleLabelInput(action===Csts.requestText)
		if(cond&&action!==Csts.requestLineStyle){
			this.ls.focusOut()
		}
		this[action]&&this[action](target,e.epos())
		
	}
	requestFill(target,pos){
		let {left,top,height} = this.panel.getBoundingClientRect()
		this.cp.focusIn({
			left,
			top:top+height
		})
	}
	requestLineStyle(target,pos){
		let {left,top,height} = this.panel.getBoundingClientRect()
		this.ls.focusIn({
			left,
			top:top+height
		},this.path.state)
	}
	requestGarbage(){
		this.emit(EN.action,{
			action:"onRemoveAction"
		})
	}
	onColorPick(data){
		let c16 = data.data.c16
		this.emit(EN.action,{
			action:Csts.onStateAction,
			k:"strokeStyle",
			v:c16,
			idx:this.idx
		})
		this.cp.focusOut()
	}
	onFocusIn(pos,path,idx){
		this.path = path
		this.idx = idx
		let {left,top} = pos
        this.panel.style.cssText=`left:${left}px;top:${top}px`
        this.render(path,idx)
	}
	onFocusOut(){
		this.ls.focusOut()
		this.cp.focusOut()
		this.$layer.classList.add(CN.hide)
	}
	fadeOut(){
		this.$layer.classList.add(CN.hide)
	}
	fadeIn(){
		this.$layer.classList.remove(CN.hide)
	}
}